<template>
	<div>
		<headerTop></headerTop>
		<div class="table-container">
			<el-table
			:data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
			style="width: 100%;"
			highlight-current-row
			border>
				<el-table-column type="expand">
					<template slot-scope="props">
						<el-form label-position="left" inline class="demo-table-expand">
							<el-form-item label="用户名">
								<span>{{ props.row.user_name }}</span>
							</el-form-item>
							<el-form-item label="店铺名称">
								<span>{{ props.row.restaurant_name }}</span>
							</el-form-item>
							<el-form-item label="收货地址">
								<span>{{ props.row.address }}</span>
							</el-form-item>
							<el-form-item label="店铺 ID">
								<span>{{ props.row.restaurant_id }}</span>
							</el-form-item>
							<el-form-item label="店铺地址">
								<span>{{ props.row.restaurant_address }}</span>
							</el-form-item>
						</el-form>
					</template>
				</el-table-column>
				<el-table-column
				  label="订单 ID"
				  prop="id">
				</el-table-column>
				<el-table-column
				  label="总价格"
				  prop="total_amount">
				</el-table-column>
				<el-table-column
				  label="订单状态"
				  prop="status">
				</el-table-column>
			</el-table>
			<div class="Pagination" style="text-align: left;margin-top: 10px;">
			    <el-pagination
			      @current-change="handleCurrentChange"
			      :current-page="currentPage"
			      layout="total, prev, pager, next"
			      :total="tableData.length">
			    </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import headerTop from '../../../components/headerTop.vue'
	export default {
		components: {
			headerTop
		},
		methods:{
			//每页条数改变时触发 选择一页显示多少行
			     handleSizeChange(val) {
			         console.log(`每页 ${val} 条`);
			         this.currentPage = 1;
			         this.pageSize = val;
			     },
			     //当前页改变时触发 跳转其他页
			     handleCurrentChange(val) {
			         console.log(`当前页: ${val}`);
			         this.currentPage = val;
			     }
		},
		data() {
			return {
				currentPage: 1, // 当前页码
				pageSize: 10, // 每页的数据条数
				tableData: [{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				},{
					user_name: '小狗',
					restaurant_name: '小狗的餐厅',
					address: '广东省中山市',
					restaurant_id: '123456',
					restaurant_address: '293号',
					id: '1123',
					total_amount: '112$',
					status: '配送中'
				}, ]
			}
		}
	}
</script>

<style lang="scss">
	.table-container{
		padding: 20px;
	}
</style>
